// 放大镜效果
class Magnifier{
    constructor(){
        this.init();
        this.bindEvent();
    }
    init = function () {
        // 界面盒子和图片元素
        this.img_ele = $(".img");
        this.img_img_ele = $(".img img");
        this.fangdade_ele = $(".fangdade");
        this.fang_img_ele = $(".fangdade img")
        // 遮罩层
        // console.log(this.img_ele);
        this.span_ele = $(".img span");
        var offset =this.img_ele.offset();
        // 距离可视窗口的位置距离
        this.img_left = offset.left;
        this.img_top = offset.top;
        // console.log(offset)
        // console.log(this.img_left);
        // 盒子大小
        this.img_w = this.img_ele.width();
        this.img_h = this.img_ele.height();
        // console.log(this.img_w);
        // 遮罩大小
        this.span_w = this.span_ele.width();
        this.span_h = this.span_ele.height();
        // console.log(this.span_w);
        // 边界
        this.max_left = this.img_w - this.span_w;
        this.max_top = this.img_h - this.span_h;
        // console.log(this.max_left);
        // console.log(this.max_top);
    }
    
    bindEvent = function () {
        this.img_ele.on("mouseenter",function(){
            this.show();
        }.bind(this)
        )
        this.img_ele.on("mouseleave",function(){
            this.hide();
        }.bind(this)
        )
        // 鼠标划入获取坐标
        this.img_ele.on("mousemove",function(evt){
            var e=evt || event;
            this.mask(e);
            this.bigMove();
        }.bind(this)
        )
    }

    // 移入显示
    show = function (){
        this.span_ele.css({
            display :"block"
        })
        this.fangdade_ele.css({
            display:"block"
        })
    }
    // 移出隐藏
    hide = function (){
        this.span_ele.css({
            display :"none"
        })
        this.fangdade_ele.css({
            display:"none"
        })
    }

    // 遮罩跟随
    mask = function (e){
        // 获取鼠标坐标client(可视窗口)和 page(距离浏览器原点)
        var poistion_X=e.pageX; //获取当前鼠标相对img的X坐标  
        var position_Y=e.pageY;
        // var c_y =e.clientY;
        // console.log(poistion_X);
        // 计算的到到跟随所需要的坐标
        var _left = poistion_X - this.img_left - this.span_w/2;
        var _top = position_Y - this.img_top - this.span_h/2;
        // console.log(_left);
        // 进行边界判定
        // 极小值
        _left = _left <= 0 ? 0 : _left;
        _top = _top <= 0 ? 0 : _top;
        // console.log(position_Y,c_y);
        // 极大值
        _left = _left > this.max_left ? this.max_left : _left;
        _top = _top > this.max_top ? this.max_top : _top ;
        
        // 设置遮罩位置 
        this.span_ele.css({
            left : _left,
            top : _top
        })
        // 计算大图移动比例
        // 移动距离/总距离 => _left / this.max_left
        this.fang_left = _left / this.max_left;
        this.fang_top = _top / this.max_top;
    }
    // 大图移动
    bigMove = function (){
        this.fang_img_ele.css({
            left : -this.fang_left * 100 + "%",
            top : -this.fang_top * 100 + "%"
        })
    }
    
}
var mag = new Magnifier();

// 渲染
var loac_parse = null;
function render(){
    loac_parse =JSON.parse(localStorage.getItem("cart"));
    // console.log(loac_parse);
    // console.log(loac_parse.photo.path);
    $(".xrimg1").attr("src",loac_parse.photo.path);
    $(".fangdade img").attr("src",loac_parse.photo.path);
    $(".otherimg img").attr("src",loac_parse.photo.path);
    $(".price").html(loac_parse.favorite_count);
    $(".yspname").prepend(loac_parse.msg);
    $(".yspzuozhe").prepend(loac_parse.sender.username);
    $(".riqi").html(loac_parse.add_datetime);
}
render();

// 点击进入购物车 
// 本地数据获取
var cart_list = (function(){
    var storage = localStorage.getItem("cart_list");
    if(storage === null){
          return [];
    }
    return JSON.parse(storage);
})();
// console.log(cart_list);
// 数据的存储
$(".cart").on("click",function(){
    var item = loac_parse;
    // console.log(item);
    var has_some = cart_list.some(function(cart_item){
        if(item.id === cart_item.id){
            cart_item.buyable ++;
            return true;
        }
    })
    if(!has_some){
        item.buyable = 1;
        cart_list.push(item);
    }
    
    localStorage.setItem("cart_list",JSON.stringify(cart_list));
    // fire 启动存贮器
    add_callback.fire();
    // location.assign("../html/gwc.html");

})

// 设置容器
add_callback = $.Callbacks();
// add 存储器
add_callback.add(sumGoodCount);

function sumGoodCount(){
    // 这是用来把本地数据的count 相加
    console.log(cart_list);
    if(cart_list.length===1){
        total = cart_list[0].buyable;
    }
    if(cart_list.length>=2){
        var total = cart_list.reduce(function(prev,item){
            var prev_num = typeof prev === "number" ? prev : prev.buyable;
            // console.log(prev_num,item.buyable);
            return prev_num + item.buyable;    
        })
    }
    console.log(total);
    $(".gwc i").html(total);
}
sumGoodCount();
